<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>用户总数</span>
              <el-icon><User /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ userCount }}</h2>
            <div class="trend">
              <span :class="{ 'up': userTrend > 0, 'down': userTrend < 0 }">
                {{ Math.abs(userTrend) }}%
              </span>
              较上月
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>今日访问</span>
              <el-icon><View /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ visitCount }}</h2>
            <div class="trend">
              <span :class="{ 'up': visitTrend > 0, 'down': visitTrend < 0 }">
                {{ Math.abs(visitTrend) }}%
              </span>
              较昨日
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>任务完成率</span>
              <el-icon><Check /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ taskCompletionRate }}%</h2>
            <div class="trend">
              <span :class="{ 'up': taskTrend > 0, 'down': taskTrend < 0 }">
                {{ Math.abs(taskTrend) }}%
              </span>
              较上周
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="6">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>系统消息</span>
              <el-icon><Bell /></el-icon>
            </div>
          </template>
          <div class="card-content">
            <h2>{{ messageCount }}</h2>
            <div class="trend">
              <span :class="{ 'up': messageTrend > 0, 'down': messageTrend < 0 }">
                {{ Math.abs(messageTrend) }}%
              </span>
              较昨日
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="chart-row">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成图表库，如ECharts -->
            <div class="chart-placeholder">访问趋势图表</div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>任务分布</span>
            </div>
          </template>
          <div class="chart-container">
            <!-- 这里可以集成图表库，如ECharts -->
            <div class="chart-placeholder">任务分布图表</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-card class="welcome-card">
      <h2>欢迎使用管理系统</h2>
      <p>这是一个基于Vue 3和Node.js的管理系统，提供了用户管理、任务管理、数据统计等功能。</p>
      <div class="feature-list">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="feature-item">
              <el-icon><User /></el-icon>
              <h3>用户管理</h3>
              <p>支持用户注册、登录、权限管理等功能</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-item">
              <el-icon><List /></el-icon>
              <h3>任务管理</h3>
              <p>支持任务的创建、编辑、删除和状态跟踪</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="feature-item">
              <el-icon><DataLine /></el-icon>
              <h3>数据统计</h3>
              <p>提供丰富的数据统计和可视化功能</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { User, View, Check, Bell, List, DataLine } from '@element-plus/icons-vue';

const userCount = ref(100);
const userTrend = ref(5);
const visitCount = ref(50);
const visitTrend = ref(-2);
const taskCompletionRate = ref(85);
const taskTrend = ref(3);
const messageCount = ref(10);
const messageTrend = ref(0);
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
  padding: 20px 0;
}

.trend {
  font-size: 14px;
  color: #666;
  margin-top: 10px;
}

.trend span {
  margin-right: 5px;
}

.trend .up {
  color: #67c23a;
}

.trend .down {
  color: #f56c6c;
}

.chart-row {
  margin-top: 20px;
}

.chart-container {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-placeholder {
  color: #909399;
  font-size: 16px;
}

.welcome-card {
  margin-top: 20px;
  text-align: center;
}

.welcome-card h2 {
  margin-bottom: 20px;
}

.feature-list {
  margin-top: 30px;
}

.feature-item {
  padding: 20px;
  text-align: center;
}

.feature-item .el-icon {
  font-size: 40px;
  color: #409eff;
  margin-bottom: 15px;
}

.feature-item h3 {
  margin: 10px 0;
  color: #303133;
}

.feature-item p {
  color: #606266;
  font-size: 14px;
}
</style> 